<template>
  <div class="goods contain">
    <el-table
      style="width: 100%"
      @cell-click="goDetail"
      stripe
      :data="data"
      ref="cart"
    >
      <el-table-column label="卖家" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <p>{{ scope.row.ower.nick }}</p>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        label="商品名称"
        width="180"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <template slot-scope="scope">
          <b>{{ scope.row.goodsName }}</b>
        </template>
      </el-table-column>
      <el-table-column label="订单备注" width="180">
        <template slot-scope="scope">
          <b>{{ scope.row.temp }}</b>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <b>{{ scope.row.create }}</b>
        </template>
      </el-table-column>
      <el-table-column label="价格" sortable>
        <template slot-scope="scope">
          <i style="font-size: 17px; color: red">￥{{ scope.row.price }}</i>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180" align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="large"
            @input="changeSearch($event, scope.$index)"
            placeholder="输入关键字搜索"
          />
        </template>
        <template slot-scope="scope">
          <div style="text-align: center">
            <b>{{
              scope.row.state == 1
                ? "等待确定"
                : scope.row.state == 2
                ? "待发货"
                : "等待确定收货"
            }}</b>
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button
            size="medium"
            :type="scope.row.state == 1 ? 'primary' : 'warning'"
            v-if="$store.state.user.role != 'user'"
            @click.stop="handleEdit(scope.row._id, scope.row, scope.$index)"
            >{{ scope.row.state == 1 ? "确认支付" : "取消支付" }}</el-button
          >
          <!-- <el-button
            size="medium"
            type="primary"
            v-if="$store.state.user.role == 'user'"
            @click.stop="shouhuo(scope.row._id, scope.row, scope.$index)"
            >{{ scope.row.state == 3 ? "确定收货" : "催发货" }}</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      data: [],
      pages: 1,
      cart: this.$store.state.user.cart,
      // loading: true,
      timer: null,
      search: "",
    };
  },
  computed: {},
  methods: {
    changeSearch(x) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        console.log(x);
        this.axios
          .get("/api/v1/orders", {
            params: {
              key: x,
            },
          })
          .then((res) => {
            // console.log(res);
            this.data = res.data.map((item) => {
              item.ower = JSON.parse(item.ower);
              return item;
            });
            // console.log(this.data);
          });
      }, 300);
    },
    handleEdit(id, row, index) {
      // console.log(id, row);
      this.axios.post("/api/v1/orders/confirm", { oid: id }).then((res) => {
        // console.log(res);
        this.msg(res, this);
        res.data.ower = JSON.parse(res.data.ower);
        this.data.splice(index, 1, res.data);
        this.data = JSON.parse(JSON.stringify(this.data));
        console.log(this.data);
      });
    },
    goDetail(row) {
      // console.log(row);
      this.$router.push({ path: "/detail", query: { id: row.pid } });
    },
  },
  created() {
    this.axios.get("/api/v1/orders").then((res) => {
      // console.log(res);
      this.data = res.data.map((item) => {
        item.ower = JSON.parse(item.ower);
        return item;
      });
      // console.log(this.data);
    });
  },
};
</script>
<style scoped>
.goods {
  height: 100%;
  /* overflow: auto; */
}
.goods-con {
  display: flex;
  justify-content: space-around;
}
.goods-con li {
  float: left;
  width: 100%;
  height: 180px;
}
.goods-con img {
  /* height: 175px;
  width: 260px; */
  height: 100%;
}
.footer {
  height: 30px;
  line-height: 30px;
  width: 100%;
  text-align: center;
}
</style>